import { ref, watchEffect } from "vue";

const todoDatas = {
  fetch() {
    return JSON.parse(localStorage.getItem("todoLists") || "[]");
  },
  save(todos) {
    localStorage.setItem("todoLists", JSON.stringify(todos));
  },
};

export default function useTodos(state) {
  const todos = ref(todoDatas.fetch());
  // 新增事项
  const addTodo = () => {
    if (state.todoTitle) {
      todos.value.push({
        title: state.todoTitle,
        id: `todo_id_xxx${Math.random()}`,
        completed: false,
      });
      state.todoTitle = "";
    }
  };
  // 删除事项
  const removeTodo = (todo) => {
    todos.value.splice(todos.value.indexOf(todo), 1);
  };
  // 只要 todos.value 有变化，就会执行 watchEffect
  watchEffect(() => {
    todoDatas.save(todos.value);
  });

  return {
    todos,
    addTodo,
    removeTodo,
  };
}
